<template>
  <svg style="display:none;width:0;height:0" width="0" height="0" focusable="false" aria-hidden="true">
    <symbol id="f-svg-loading" viewBox="0 0 50 50">
      <path
        d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
        transform="rotate(86.9154 25 25)">
      </path>
    </symbol>
    <symbol id="f-svg-loading-1" viewBox="10 10 80 80">
      <circle cx="50" cy="50" r="30" />
    </symbol>
    <symbol id="f-svg-loading-2" viewBox="0 0 24 30">
      <rect x="0" y="8.66115" width="4" height="12.6777" opacity="0.2">
        <animate attributeName="opacity" values="0.2; 1; .2" begin="0s" dur="0.6s"
          repeatCount="indefinite"></animate>
        <animate attributeName="height" values="10; 20; 10" begin="0s" dur="0.6s"
          repeatCount="indefinite"></animate>
        <animate attributeName="y" values="10; 5; 10" begin="0s" dur="0.6s"
          repeatCount="indefinite"></animate>
      </rect>
      <rect x="8" y="6.16115" width="4" height="17.6777" opacity="0.2">
        <animate attributeName="opacity" values="0.2; 1; .2" begin="0.15s" dur="0.6s"
          repeatCount="indefinite"></animate>
        <animate attributeName="height" values="10; 20; 10" begin="0.15s" dur="0.6s"
          repeatCount="indefinite"></animate>
        <animate attributeName="y" values="10; 5; 10" begin="0.15s" dur="0.6s"
          repeatCount="indefinite"></animate>
      </rect>
      <rect x="16" y="6.33885" width="4" height="17.3223" opacity="0.2">
        <animate attributeName="opacity" values="0.2; 1; .2" begin="0.3s" dur="0.6s"
          repeatCount="indefinite"></animate>
        <animate attributeName="height" values="10; 20; 10" begin="0.3s" dur="0.6s"
          repeatCount="indefinite"></animate>
        <animate attributeName="y" values="10; 5; 10" begin="0.3s" dur="0.6s"
          repeatCount="indefinite"></animate>
      </rect>
    </symbol>
    <symbol id="f-svg-loading-3" viewBox="0 0 1024 1024">
      <path
        d="M514.048 337.715a32 32 0 0 1-32-32V135.168a32 32 0 1 1 64 0v170.534a32 32 0 0 1-32 32z m-1.28 581.799a32 32 0 0 1-32-32V714.406a32 32 0 1 1 64 0v173.095a32 32 0 0 1-32 32zM305.011 543.347H135.744a32 32 0 0 1 0-64h169.267a32 32 0 0 1 0 64z m583.079 0H713.83a32 32 0 0 1 0-64h174.26a32 32 0 1 1 0 64zM245.978 806.4a32 32 0 0 1-22.656-54.669L342.643 632.32a32 32 0 0 1 45.325 45.325L268.646 796.979a31.898 31.898 0 0 1-22.668 9.344z m408.435-408.5a32 32 0 0 1-22.656-54.68l123.558-123.56a32 32 0 1 1 45.325 45.3L677.12 388.544a31.898 31.898 0 0 1-22.669 9.357z m121.523 411.06a31.885 31.885 0 0 1-22.669-9.344l-122.15-122.15a32 32 0 1 1 45.325-45.325l122.15 122.15a32 32 0 0 1-22.656 54.669zM364.672 397.632a31.923 31.923 0 0 1-22.669-9.344L221.273 267.52a32 32 0 1 1 45.325-45.325l120.73 120.743a32 32 0 0 1-22.656 54.668z m0 0"
        p-id="4486"></path>
    </symbol>
  </svg>
</template>

<script>
  export default {
    name: 'w-svg-loading'
  }
</script>

<style>
  .f-svg {
    width: 20px;
    height: 20px;
    fill: #777;
  }
  
  .f-svg-loading {
    animation: f-svg-key-rotate .6s linear infinite;
  }

  .f-svg-loading-1 {
    animation: f-svg-key-rotate 1.5s linear infinite;
  }
  
  .f-svg-loading-3 {
    animation: f-svg-key-rotate 2s linear infinite;
  }

  .f-svg-loading-1>use {
    stroke: #777;
    stroke-width: 6;
    fill: none;
    animation: f-svg-key-dash 1.5s linear infinite;
  }

  @keyframes f-svg-key-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes f-svg-key-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 130, 200;
      stroke-dashoffset: -50;
    }
    100% {
      stroke-dasharray: 130, 200;
      stroke-dashoffset: -188;
    }
  }
</style>
